<template>
    <transition name="fade">
        <div
            v-if="isVisible"
            class="pdf-wrapper"
            @click.self="handleClose"
        >
            <transition name="load">
                <div
                    v-if="enter"
                    class="pdf-content"
                >
                    <Img :src="src" />
                    <div class="footer">
                        <Button
                            :loading="loading"
                            @click="handleClick"
                        >
                            签署
                        </Button>
                    </div>
                </div>
            </transition>
        </div>
    </transition>
</template>

<script>
export default {
    name: 'PdfPopup',
    components: {},
    props: {
        src: {
            type: String,
            default: '',
        },
        visible: {
            type: Boolean,
            default: false,
        },
        loading: {
            type: Boolean,
            default: false,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        countdown: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            isVisible: false,
            enter: false,
            PDFUrl: '',
        };
    },
    computed: {},
    watch: {
        visible(val) {
            if (val) {
                this.isVisible = true;
                this.$nextTick((_) => {
                    this.enter = true;
                });
            } else {
                this.handleClose();
                this.enter = false;
                this.$nextTick((_) => {
                    this.isVisible = false;
                });
            }
        },
    },
    mounted() {},
    methods: {
        handleClick() {
            this.$emit('on-click');
        },
        close() {
            this.handleClose();
        },
        handleClose() {
            this.$emit('update:visible', false);
        },
    },
};
</script>

<style scoped>
.pdf-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    color: #666;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 1;
}
.pdf-content {
    position: absolute;
    top: 60px;
    width: 100%;
    height: calc(100% - 60px);
    padding: 16px 0 60px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-color: #fff;
    overflow-y: scroll;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
    opacity: 0;
}
.load-enter-active,
.load-leave-active {
    transition: top 0.3s;
}
.load-enter,
.load-leave-to {
    top: 100vh;
}
</style>
